import React,{useState,useEffect} from 'react'
import  {useHistory} from "react-router-dom"
import HomeSwiper from  "../components/home/HomeSwiper"
import HomeMiddle from "../components/home/HomeMiddle";
import  { bannerList,serviceList} from "../service/homeService"

export default function Home() {

    const [list, setlist] = useState([]);//轮播图的集合
    const [list2,setServiceList] = useState([]);//全部服务的集合
    let history = useHistory();

    let initList =async ()=>{
        let res = await   bannerList({
            type:2,
            pageNum:1,
            pageSize:8
        })
        let res2  = await  serviceList({});
        console.log(res2);
         setlist(res.data.rows);

        let  middleList  = res2.data.rows;
        let tempList = [];

        if(middleList.length>9){
            tempList=  middleList.slice(0,9).concat([{id:0,serviceName:"全部服务",imgUrl:"/prod-api/profile/upload/image/2021/05/05/8f5d9d3a-3ac7-4e66-9d9a-630ba4bd80ef.png"}])
        }else{
            tempList = middleList;
        }

        setServiceList(tempList);
    }

    useEffect( ()=>{
        initList();

    },[])

    const  gotoDetail = (item:any)=>{
        if(item.link){
            history.push(item.link);
        }else{
            history.push("/all");
        }
        
    }

  return (
    <div style={{width:"100%"}}>
        <HomeSwiper list={list}></HomeSwiper>
        <HomeMiddle list={list2} onClick={gotoDetail}></HomeMiddle>
        
    </div>
  )
}
